<script lang="ts" setup>
import i18n from "@/i18n";
import navTo from "@/utils/navTo";
import { toRefs } from "vue";
const props = defineProps<{
  value: string;
  visible?: boolean;
}>();
const emits = defineEmits<{
  (e: "change"): void;
  (e: "claim"): void;
  (e: "close"): void;
  (e: "update:value", data: string): void;
}>();
const { value } = toRefs(props);
</script>

<template>
  <div class="FootMenuWrapper">
    <div class="FootMenContent flex items-center">
      <div class="ItemWrapper" @click="value === 'home' ? '' : navTo('/')">
        <div class="ActiveWrapper">
          <img
            v-if="value === 'home'"
            class="Icon"
            src="@/assets/images/menu/homeBlack.svg"
          />
          <img
            v-if="value !== 'home'"
            class="Icon"
            src="@/assets/images/menu/homeWhite.svg"
          />
          <div :class="value !== 'home' ? 'MenuText' : 'MenuText colorSel'">
            {{ i18n.global.t("FooterT1") }}
          </div>
        </div>
      </div>
      <div class="ItemWrapper" @click="value === 'mail' ? '' : navTo('/games')">
        <div class="ActiveWrapper">
          <img
            v-if="value === 'mail'"
            class="Icon"
            src="@/assets/images/menu/ylcWhite.svg"
          />
          <img
            v-if="value !== 'mail'"
            class="Icon"
            src="@/assets/images/menu/ylcBlack.svg"
          />
          <div :class="value !== 'mail' ? 'MenuText' : 'MenuText colorSel'">
            {{ i18n.global.t("FooterT2") }}
          </div>
        </div>
      </div>
      <div class="ItemWrapper" @click="value === 'me' ? '' : navTo('/me')">
        <div class="ActiveWrapper self-center">
          <img
            v-if="value === 'me'"
            class="Icon"
            src="@/assets/images/menu/mineWhite.svg"
          />
          <img
            v-if="value !== 'me'"
            class="Icon"
            src="@/assets/images/menu/mineBlack.svg"
          />
          <div :class="value !== 'me' ? 'MenuText' : 'MenuText colorSel'">
            {{ i18n.global.t("FooterT3") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";
.FootMenuWrapper {
  @apply fixed;
  bottom: 0;
  width: 750 * $_ru;
  background: #0f212e;
  z-index: 999;
}
.Icon {
  width: 36 * $_ru;
  height: 36 * $_ru;
}
.MenuText {
  color: #8a8a8a;
  text-align: center;
  font-family: Mont;
  font-size: 20 * $_ru;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  margin-top: 6 * $_ru;
}
.colorSel {
  color: #ffffff;
}
.ActiveWrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 76 * $_ru;
  border-radius: 128 * $_ru;
  align-items: center;
  justify-content: center;
}
.ItemWrapper {
  display: flex;
  flex: 1;
}

.FootMenContent {
  background: #1b202a;
  padding: 12 * $_ru;
}
</style>
